<template>
  <div class="header">
    <div class="search-info">
      <div class="logo">
        <img src="../assets/img/logo.png">
      </div>
      <form class="search" name="thrForm" id="theForm" method="post" @keypress="submit($event)">
        <input v-model="wineClass" class="wine-class" type="text" formnovalidate="formnovalidate" :placeholder="inputPlaceholder" name="keyword" id="keyword">
        <input v-model="year" class="year" name="kyear" id="kyear" type="text" placeholder="年份" oninput="if (value.length > 4) value = value.slice(0, 4)">
      </form>
      <span class="login" v-if="hasHeader"><a href="http://www.finewest.cn/buyer/index.htm"><img src="../assets/picture/username.png" width="20" height="20"></a></span>
      <router-link v-else to="/login" class="login">登录</router-link>
    </div>
    <p class="number">
      <span>{{wineNum}}</span>款酒<i>/</i><span>{{originNum}}</span>国际酒庄 | 酒商<i>/</i><span>{{dealNum}}</span>采购交易
    </p>
  </div>
</template>
<script>
  import {getCookie} from '../common/cookie'
  export default {
    name: 'header',
    data () {
      return {
        year: '',
        wineClass: '',
        wineNum: 0,
        originNum: 0,
        dealNum: 0,
        inputPlaceholder: '',
        hasHeader: false
      }
    },
    mounted: function () {
      this.number()
      this.judgeHeader()
    },
    methods: {
      submit (event) {
        if (event.keyCode === 13) {
          var childs = document.querySelector('#theForm').childNodes
          for (var i = 0; i < childs.length; i++) {
            if (childs[i].nodeType === 1) {
              childs[i].blur()
            }
          }
          if (this.wineClass === '') {
            return false
          }
          location.href = 'http://www.finewest.cn/search.htm?keyword=' + this.wineClass + '&kyear=' + this.year + '&is_b=1&type=goods'
        }
      },
      judgeHeader () {
        if (getCookie('USER_NAME')) {
          this.hasHeader = true
        }
      },
      number: function () {
        this.$http({
          method: 'get',
          url: 'http://www.finewest.cn/m/indexData.htm',
          headers: {},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.wineNum = response.countGoods
          this.originNum = response.countSeller
          this.dealNum = response.countOrder
          var number = Math.floor(this.wineNum / 10000).toString()
          this.inputPlaceholder = '搜索' + number.substr(0, number.length - 1) + '0w+精品酒款 如：Lafite'
        }, function (response) {
          console.log(response)
          console.log('获取数据失败')
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  $back-color:#f5f5f5;
  $input-color:#ffffff;
  .header{
    background-color: $back-color;
  }
  .search-info {
    overflow: hidden;
    position: relative;
  }
  .logo {
    float: left;
    margin: 17px 16px 16px 17px;
  }
  .logo {
    img{
      display: inherit;
      width: 40px;
      height: 40px;
    }
  }
  .search {
    float: left;
    width: calc(100% - 120px);
    margin-top: 21px;
    border: 1px solid #bbbbbb;
    position: relative;
    box-sizing: border-box;
  }
  .search input {
    float: left;
    height: 31px;
    outline: none;
    border: none;
    background-color: $input-color;
    border-radius: 0px;
  }
  .search input.year {
    width: 64px;
    text-align: center;
    position: relative;
  }
  .login {
    font-size: 12px;
    color: #bbbbbb;
    display: table;
    float: left;
    width: 47px;
    height: 33px;
    text-align: center;
    line-height: 33px;
    position: absolute;
    right: 0;
    top: 21px;
  }
  span.login img {
    vertical-align: middle;
  }
  .search{
    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 1px;
      height: 15px;
      background-color: #dddddd;
      top: 8px;
      right: 63.5px;
      z-index: 9;
    }
  }
  .search input.wine-class {
    width: calc(100% - 64px);
    text-indent: 26px;
    background: url("../assets/img/search.png") 6px 50% no-repeat $input-color;
    background-size: 14px 14px;
  }
  input::-webkit-input-placeholder { /* WebKit browsers */
    color:#bbbbbb;
  }
  input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#bbbbbb;
  }
  input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#bbbbbb;
  }
  input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#bbbbbb;
  }
  @media screen and (max-width: 360px) and (min-width: 320px) {
    .search input.wine-class {
      width: 74%;
    }
    .search input.year {
      width: 26%;
    }
    .search{
      /*width:60%;*/
      &::before {
         content: "";
         display: block;
         position: absolute;
         width: 1px;
         height: 15px;
         background-color: #dddddd;
         top: 8px;
         right: 26%;
       }
    }
    /*a.login{
      width: 14.7%;
    }*/
  }
  $index-color: #ed2946;
  p.number {
    text-align: center;
    font-size: 14px;
    color: #000000;
    padding-bottom:17px;
    letter-spacing: 2px;
    i,span{
      color:$index-color;
    }
    i{
      margin: 0 5px;
    }
    @media screen and (max-width: 320px){
      letter-spacing: 0;
    }
  }
</style>
